<template>
	<w-layout :navBack="false" showTabbar showNavbar navTitle="首页" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent">
		<template #default>
			<view class="container">
				<view class="" style="" v-for="(item,index) in 1">
					<view class="bold fs-55 text-color-b w-fit" style="">
						首页内容
					</view>
				</view>
				
				<view class="">
					<w-swiper></w-swiper>
				</view>


				<cut-corner :arrow="1">
					<cut-corner :arrow="3">
						<view class="px-6 py-6" style="width: 350rpx;height: 300rpx;background-color: #66E9FF;">
							<cut-corner :arrow="1" width="100%" height="100%">
								<cut-corner :arrow="3" width="100%" height="100%">
									<image class="w-100 h-100" src="/static/logo.png" mode=""></image>
								</cut-corner>
							</cut-corner>
						</view>
					</cut-corner>
				</cut-corner>


				<cut-corner :arrow="2">
					<view class="px-6 py-6" style="width: 350rpx;height: 300rpx;background-color: #66E9FF;">
						<cut-corner :arrow="2" width="100%" height="100%">
							<view class="px-6 py-6 w-100 h-100" style="background-color: #000;">
								<cut-corner :arrow="2" width="100%" height="100%">
									<image class="w-100 h-100" src="/static/logo.png" mode=""></image>
								</cut-corner>
							</view>
						</cut-corner>
					</view>
				</cut-corner>
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance,
		nextTick,
		computed,
	} from 'vue'
	import {
		onLoad,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		storeToRefs
	} from 'pinia'
	import {

	} from '@/utils/request/api';
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		useUserStore
	} from '@/store/user'
	import {
		useWebviewStore
	} from '@/store/webview'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const webviewStore = useWebviewStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)

	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onLoad(async (options) => {
	})

	onPageScroll((e) => {})
	onReachBottom(() => {

	})
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}

	.txt-gray {
		color: var(--gray-9);
	}

	.navbar-box {
		height: 100%;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;

		.nav-header {
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);
			z-index: 8;

			.nav-header-point {
				position: absolute;
				top: 75%;
				left: 75%;
				width: 10rpx;
				height: 10rpx;
				border: 1rpx solid white;
				background-color: #11C164;
				border-radius: 50%;
			}
		}

		.nav-title {
			width: 100%;
			text-align: center;
			font-size: 32rpx;
		}
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;

		.province-search-box {
			transition: all 0.5s;
			position: fixed;
			width: 100%;
			height: 45px;
			box-sizing: border-box;
			padding: 0 30rpx;
			z-index: 999;

			.province-label {
				color: white;
				font-size: 30rpx;
			}

			.search_box {
				margin-left: 30rpx;
				flex: 1;
			}
		}

		.header-box {
			width: 100%;
			height: 62.4vw;
			position: relative;
			overflow: hidden;

			.header-box-bk {
				width: 100%;
				height: 62.4vw;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}



			.head-swiper-cover {}

			.head-swiper {

				.head-swiper-item {}
			}
		}

		.switch-box {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 20rpx;



			.home-tabs-item {
				flex: 1;
				margin: 0 10rpx;
				border-radius: 12rpx;
				border: 2rpx solid var(--gray-c);
				background-color: white;

				.txt {
					color: var(--gray-9);
				}

				&.check {
					width: 47%;
					border: 2rpx solid var(--color);
					background-color: var(--color);

					.txt {
						color: white;
					}
				}
			}
		}

		.functions-box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;

			display: flex;
			flex-wrap: wrap;


			.functions-point {
				margin: 16rpx 0;
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.advertisement-box {
			position: relative;
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;


			.advertisement-animate-box {
				position: absolute;
				bottom: 15%;
				left: 8%;
				width: 300rpx;

				.tap-icon {
					position: absolute;
					right: 5%;
					bottom: -40%;
					width: 50rpx;
				}
			}
		}

		.tabs-box {
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx 30rpx;
			background-color: white;

			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-column-gap: 8%;

			.tabs-item {

				.tabs-item-label-1,
				.tabs-item-label-2 {
					line-height: normal;
					font-style: italic;
					color: var(--gray-9);
				}
			}

			.tabs-item-check {
				position: relative;
				transform: scale(1.1);

				.tabs-item-label-1,
				.tabs-item-label-2 {
					font-weight: bold;
				}

				.tabs-item-label-1 {
					color: black;
				}

				.tabs-item-label-2 {
					color: var(--color);
				}

				&::before {
					content: '';
					position: absolute;
					top: 40%;
					left: 0;
					width: 100%;
					height: 10rpx;
					background: linear-gradient(to right, var(--color), transparent);
				}
			}
		}

		.content-swiper {
			width: 100%;
			position: relative;

			.swiper-item {
				width: 100%;
				box-sizing: border-box;
				padding: 15rpx 0;

			}
		}
	}

	.animate-scale {
		animation-name: scale-circulate;
		animation-duration: 0.65s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease;
	}

	@keyframes scale-circulate {
		0% {
			transform: scale(0.8);
		}

		;

		70% {
			// transform: rotate(0);
		}

		85% {
			// transform: rotate(-1deg);
		}

		100% {
			transform: scale(1.0);
			// transform: rotate(1deg);
		}
	}

	.animate-tap {
		animation-name: tap;
		animation-duration: 0.65s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease;
	}

	@keyframes tap {
		0% {
			transform-origin: center;
			transform: rotate(-8deg) scale(1) translate(0, 0);
		}

		;

		70% {}

		85% {}

		100% {
			transform: rotate(-16deg) scale(0.8) translate(-30rpx, -10rpx);
		}
	}
</style>